<template lang="pug">
  div
    s-table(
      ref="table"
      v-if="$route.path === '/childCare/evaluation/sport/classess'"
      v-loading="loading"
      reqUrl="/peapi/records/records"
      :column="classesColumn"
      :filterProps="{fields: searchConfig}"
      :queryPropsParams="{areaId: curArea.areaId}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large" @click="actionHandle({}, 'import')" round) 导入
        input(ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick")
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD hh:mm:ss')}}
      template(slot="action" slot-scope="text, scope")
        template
          el-link(slot="reference" v-if="!scope.cardNo" type="primary" @click="actionHandle(scope, 'export')") 详情
          el-link(slot="reference" v-if="!scope.cardNo" type="primary" @click="actionHandle(scope, 'download')") 下载
    router-view(v-else)
</template>
<script>
import { mapGetters } from 'vuex'
import { column } from './config'
import { getClassesByArea } from '@/api/common'
import { importResultRaw } from '../api'
export default {
  components: {
  },
  data () {
    return {
      classesColumn: column,

      classes: [],
      classId: '',

      loading: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      const { classId } = this
      return [
        {
          label: '选择班级',
          key: 'classId',
          type: 'select',
          initialValue: classId,
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          }
        }
      ]
    }
  },
  mounted () {
    this.getClasses()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },

    // 获取托班班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
      this.classId = this.classes[0]?.id || ''
      this.refreshTable()
    },

    actionHandle (row, type = 'unbind') {
      console.log(type)
      if (type === 'export') {
        const path = '/childCare/evaluation/sport/classess/info'
        const query = { id: row.id }
        this.$router.push({
          path,
          query
        })
      } else if (type === 'import') {
        this.$refs['excel-upload-input'].click()
      } else if (type === 'download') {
        window.location.href = row.importFile
      }
    },
    handleClick (e) {
      console.log('handleClick')
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      console.log(rawFile)
      this.$refs['excel-upload-input'].value = null // fix can't select the same excel
      if (!rawFile) return
      importResultRaw(this.classId, rawFile).then(res => {
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.video{
  width: 100%;
  height: 560px
}
.close{
  margin-top: 20px;
}
.excel-upload-input{
  display: none;
  z-index: -9999;
}
</style>
